<template>
  <div class="background">
    <a-card>
      <a-row>
        <a-col :span="8">
          <a-button type="primary" @click="add('')"><a-icon type="upload" />我要上传</a-button>
        </a-col>
        <a-col :span="8">
          <a-slider v-model="num" style="width: 400px;" @change="onchange" />
        </a-col>
        <a-col :span="8" style="font-size: 30px;color: #4390f7;">
          <a-icon type="picture" theme="filled" @click="picType = 1" />
          <a-icon type="profile" theme="filled" style="margin-left:20px" @click="picType = 2" />
          <a-icon type="project" theme="filled" style="margin-left:20px" @click="picType = 3" />
        </a-col>
      </a-row>
    </a-card>
    <div class="main">
      <!-- <div class="left">
        <a-card title="我的文件" class="left-card">
          <template #extra>
            <a-icon type="plus-circle" theme="filled" style="font-size: 25px;color: #1890FF;" @click="addNew(1)" />
            <a-icon type="up" v-if="showLeftOne" style="color: #1890FF;margin-left: 10px;"
              @click="showLeftOne = !showLeftOne" />
            <a-icon type="down" v-if="!showLeftOne" style="color: #1890FF;margin-left: 10px;"
              @click="showLeftOne = !showLeftOne" />
          </template>
          <div style="height:200px" v-if="showLeftOne">
            <div v-for="item,i in fileList" :key="i" class="title">
              {{ item }}
            </div>
          </div>
        </a-card>
        <a-card title="收藏" class="left-card">
          <template #extra>
            <a-icon type="plus-circle" theme="filled" style="font-size: 25px;color: #1890FF;" @click="addNew(2)" />
            <a-icon type="up" v-if="showLeftTwo" style="color: #1890FF;margin-left: 10px;"
              @click="showLeftTwo = !showLeftTwo" />
            <a-icon type="down" v-if="!showLeftTwo" style="color: #1890FF;margin-left: 10px;"
              @click="showLeftTwo = !showLeftTwo" />
          </template>
          <div style="height:200px" v-if="showLeftTwo">
            <div v-for="item,i in collectList" :key="i" class="title">
              {{ item }}
            </div>
          </div>
        </a-card>
        <a-card title="工具" class="left-card">
          <template #extra>
            <a-icon type="up" v-if="showLeftThree" style="color: #1890FF;margin-left: 10px;"
              @click="showLeftThree = !showLeftThree" />
            <a-icon type="down" v-if="!showLeftThree" style="color: #1890FF;margin-left: 10px;"
              @click="showLeftThree = !showLeftThree" />
          </template>
          <div style="height:200px" v-if="showLeftThree">
            <div v-for="item,i in toolList" :key="i" class="title">
              {{ item }}
            </div>
          </div>
        </a-card>
      </div> -->
      <div class="right">
        <a-card style="margin-bottom: 10px">
          <a-row>
            <a-col :span="24">
              <a-form layout="inline" :form="form" @submit="handleSubmit">
                <a-form-item label="文件名称">
                  <a-input allow-clear placeholder="请输入文件名称" v-model="fileName"></a-input>
                </a-form-item>
                <a-form-item label="标签">
                  <a-tree-select v-model="tagIdList" multiple show-search style="width: 200px"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请选择" allow-clear
                    tree-default-expand-all>
                    <a-tree-select-node v-for="item in searchList" :key="item.value" :value="item.value" :title="item.label" :disabled="item.disabled">
                      <a-tree-select-node v-for="subitem in item.children" :key="subitem.value" :value="subitem.value"
                        :title="subitem.label">
                      </a-tree-select-node>
                    </a-tree-select-node>
                  </a-tree-select>
                </a-form-item>
                <!-- <a-form-item label="分类">
                  <a-select style="width: 180px" show-search placeholder="请选择分类" v-model="brandName" @change="changeBrand"
                    allow-clear>
                    <a-select-option :value="item.name" v-for="(item, index) in brandList" :key="index">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item label="类型">
                  <a-select show-search style="width: 180px" placeholder="请选择类型" v-model="xlName" @change="changeXl"
                    allow-clear>
                    <a-select-option :value="item.name" v-for="(item, index) in xlList" :key="index">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item label="文件后缀">
                  <a-select show-search style="width: 180px" placeholder="请选择文件后缀" v-model="xlName" @change="changeXl"
                    allow-clear>
                    <a-select-option :value="item.name" v-for="(item, index) in xlList" :key="index">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item> -->
                <a-form-item>
                  <a-button type="primary" html-type="submit">搜索</a-button>

                </a-form-item>
              </a-form>
            </a-col>
          </a-row>
        </a-card>
        <a-spin :spinning="loading">
          <a-card v-if="picType == 1">
            <div class="row" :style="{ gridTemplateColumns: `repeat(auto-fill,${num * 1.2}%)` }">
              <div v-for="item, i in dataSource" :key="i" class="box">
                <img :src="item.linkUrl" alt="pic.jpg" style="width: 100%;object-fit: contain;">
              </div>
            </div>
          </a-card>
          <a-table bordered v-if="picType == 2" :pagination="false" :columns="columns" :data-source="dataSource"
            :scroll="{ x: true }">
            <template slot="pic" slot-scope="txt, record">
              <img :src="record.linkUrl" style="width:50px;height: 50px;object-fit: contain;" alt="" srcset="">
            </template>
            <template slot="fileType" slot-scope="txt, record">
              <span v-if="record.fileType == 1">图片</span>
              <span v-if="record.fileType == 2">压缩包</span>
              <span v-if="record.fileType == 3">视频</span>
            </template>

          </a-table>
          <a-card v-if="picType == 3">
            <div class="row" :style="{ gridTemplateColumns: `repeat(auto-fill,${num}%)` }">
              <!-- <div v-for="i in 24" :key="i" class="box">
              <img src="https://img.bzhz.jnbygroup.com/cloth.png" alt="pic.jpg" style="width: 100%;object-fit: contain;">
              <span>tupian</span>
            </div> -->
              <div v-for="item, i in dataSource" :key="i" class="box">
                <img :src="item.linkUrl" alt="pic.jpg" onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'"
                  style="width: 100%;object-fit: contain;height: 100%;">
                <span>{{ item.fileName }}</span>
              </div>
            </div>
          </a-card>
        </a-spin>
        <div style="    display: flex;justify-content: flex-end;">
          <a-pagination v-model="pageNum" :total="total" :item-render="itemRender" :show-total="total => `共 ${total} 条记录`"
            :page-size="pageSize" show-quick-jumper @change="onChange" />
        </div>
      </div>
    </div>

    <create v-if="showAdd" :content="content" @close="close"></create>
    <a-modal :title="'请输入' + typeName + '夹名称'" :visible="visible" @ok="handleOk" @cancel="visible = !visible">
      <a-input v-model="inputName" />
    </a-modal>
  </div>
</template>

<script>
import create from './create.vue'
import { postAction, getAction } from '@/api/manage'
import { uploadToken } from '@/api/api'

import { getList, deleteList, getDictChildList } from '@api/rd/index'
const columns = [
  {
    title: '文件',
    dataIndex: 'linkUrl',
    scopedSlots: { customRender: 'pic' },

  },
  {
    title: '文件名称',
    dataIndex: 'fileName',

  },
  {
    title: '上传者',
    dataIndex: 'userName',
  },
  {
    title: '文件大小',
    dataIndex: 'fileSize',
  },
  {
    title: '文件类型',
    dataIndex: 'fileType',
    scopedSlots: { customRender: 'fileType' },

  },
]
export default {
  components: {
    create
  },
  data() {
    return {
      columns,
      showLeftOne: true,
      showLeftTwo: true,
      showLeftThree: true,
      fileList: [],
      collectList: [],
      toolList: [],
      searchList: [],
      tagIdList:[],
      visible: false,
      type: '',
      inputName: '',
      typeName: '',
      picType: 3,
      fileName: '',
      token: '',
      showAdd: false,
      showDetail: false,
      form: this.$form.createForm(this),
      loading: false,
      type: '',
      num: 16,
      dataSource: [],
      partList: [],
      operList: [],
      xlList: [],
      brandList: [],
      description: '',
      dict: {},
      partName: undefined,
      partId: '',
      operName: undefined,
      operId: '',
      brandName: undefined,
      brand: '',
      xlName: undefined,
      xl: '',
      total: 0,
      pageNum: 1,
      pageSize: 18,
      itemRender: (current, type, originalElement) => {
        if (type === 'prev') {
          return <a>上一页</a>
        } else if (type === 'next') {
          return <a>下一页</a>
        }
        return originalElement
      }
    }
  },
  created() {
    // this.fetchUploadToken()
  },
  mounted() {
    this.loadData()
    this.getSearchList()
    // this.getMenuList()
    // this.getOperList()
    // this.getBrandList()
    // this.getXlList()
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    },
    css() {
      const { num } = this
      return {
        '--num': num + '%'
      }
    },
  },

  methods: {
    onChange() {
      this.loadData()
    },
    fetchUploadToken() {
      uploadToken().then(res => {
        if (res.code == 0) {
          console.log(res.data);
          this.token = res.data
          this.getMenuList()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    addNew(type) {
      this.visible = true
      this.type = type
      if (type == 1) {
        this.typeName = '文件'
      } else {
        this.typeName = '收藏'
      }
      this.inputName = ''
    },
    handleOk() {
      this.visible = false
      if (this.type == 1 && this.inputName) {
        this.fileList.push(this.inputName)
      }
      if (this.type == 2 && this.inputName) {
        this.collectList.push(this.inputName)
      }
    },
    getSearchList() {

      try {
        getAction(`/jic-basemgt-center-gallery/fileManager/localFileUpload`, {}).then(res => {
          if (res.code == 200) {
            this.searchList = res.data
            this.searchList.map((item)=>{
              if(item.children.length){
                item.disabled = true 
              }
                
            })
          } else {
            this.$message.warning(data.msg || data.message)
          }
        })
      } catch (error) {
        this.$message.error('获取菜单失败！')
      }
    },
    getMenuList() {
      const params = {
        type: 'ListMenuType',
        // token: this.token
      }
      try {
        getAction(`/jic-basemgt-center-gallery/sysDict/findSysDictLeve`, params).then(res => {
          if (res.code == 200) {
            res.data[0].childrenList[0].childrenList.map((item) => {
              this.fileList.push(item.name)
            })
            res.data[0].childrenList[1].childrenList.map((item) => {
              this.collectList.push(item.name)
            })
            res.data[0].childrenList[2].childrenList.map((item) => {
              this.toolList.push(item.name)
            })
          } else {
            this.$message.warning(data.msg || data.message)
          }
        })
      } catch (error) {
        this.$message.error('获取菜单失败！')
      } finally {
        this.loading = false
      }
    },
    close() {
      this.showAdd = false
      this.loadData()
    },
    onchange(value) {
      this.num = value
    },
    add(record) {
      this.showAdd = true
      this.content = record
    },
    handleTableChange(pagination) {
      this.pagination = pagination
      this.loadData()
    },
    async deleteRecord(record) {
      const params = {
        id: record.id
      }
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await deleteList('lib', params)
        if (res.code == 200) {
          this.$message.success('删除工艺库成功！')
          this.loadData()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('删除失败！')
      }
    },
    handleSubmit(e) {
      e.preventDefault()
      this.loadData(1)
    },
    async loadData(key) {
      this.loading = true
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      if (key) {
        params.pageNum = 1
        if (this.fileName) {
          params.fileName = this.fileName
        }
        if(this.tagIdList.length){
          params.tagIdList = this.tagIdList
        }
      }
      try {
        postAction(`/jic-basemgt-center-gallery/fileManagerInfo/getFileInfoDataByCondition`, params).then(res => {
          if (res.code == 200) {
            this.dataSource = res.data.records
            this.total = res.data.total
            this.pageNum = res.data.current
          } else {
            this.$message.warning(data.msg || data.message)
          }
        })
      } catch (error) {
        this.$message.error('获取列表失败！')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style>
.left-card .ant-card-body {
  padding: 10px !important;
}
</style>
<style lang="less" scoped>
.background {
  background: #fff;
}

.slider {
  width: 300px;
  position: absolute;
  top: -63px;
  left: 600px;
  z-index: 100;
}

.main {
  display: flex;
}

.left {
  display: flex;
  flex-direction: column;
  width: 300px;
  padding-top: 20px;
}

.title {
  display: flex;
  flex-direction: column;
  height: 25px;
  padding-left: 10px;
  line-height: 25px;
}

.right {
  padding: 10px 15px;
  // border: 1px solid #e8e8e8;
  margin-top: 20px;
  width: 100%;
}

.left-card {
  margin: 0 20px;
  margin-bottom: 20px;
}

.upload {
  position: absolute;
  top: -58px;
  left: 300px;
  z-index: 100;
}

.row {
  display: grid;
  justify-content: space-between;
  grid-column-gap: 8px;
  grid-row-gap: 20px;
}

.box {
  display: flex;
  border: 1px solid #e8e8e8;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 10px;
}
</style>